<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link href="css/dianTi.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
      .touxiang{
        width: 50px; /* 或者你想要的大小 */
        height: 50px; /* 和宽度相同 */
        border-radius: 50%; /* 创建圆形 */
      }
      .col-md-3 a img{
        transition: transform 0.3s
        
      }
      .col-md-3 a img:hover{
        transform: scale(1.2);
      }
      a{
        text-decoration: none;
      }
      a:hover{
        text-decoration: none;
      }
      body{
        background-image: url(images/body-bg.png);
      }
      nav{
        background-image: url(images/nav-bg.png);
        color: white;
      }
      .jihuo{
        display: block;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="navbar-brand ">
        <a href="#" class="div1" style="text-decoration: none; color: black;">
        <img src="images/tou1.jpg" alt="" class="touxiang">
        <span id="userName"style="color: white;"></span>
      </a>
      </div>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html"style="color: white;">首页<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="game.html"style="color: white;">游戏</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="community.html"style="color: white;">社区</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="More.html"style="color: white;">更多游戏</a>
          </li>
          <li class="nav-item">
              <a class="nav-link"style="color: white;"href="login.html">登录/注册</a>
            </li>
            <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle xiaLa" type="button" data-toggle="dropdown" aria-expanded="false">
                帮助
              </button>
              <div class="dropdown-menu bg-light" >
                <a class="dropdown-item" href="#">客服</a>
                <a class="dropdown-item" href="#">用户协议</a>
                <a class="dropdown-item" href="#">隐私政策</a>
              </div>
            </div>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>
    <div id="menu">
      <ul>
        <li ><a href="#item1" class="current" style="color: white;">1F 精选深度折扣</a></li>
        <li><a href="#item2" style="color: white;">2F 猜你喜欢</a></li>
        <li><a href="#item3" style="color: white;">3F 您的愿望单</a></li>
        <li><a href="#item4" style="color: white;">4F 您游戏的DLC</a></li>
        <li><a href="#item5" style="color: white;">5F 热销商品</a></li>
      </ul>
    </div>

    <div id="content">
      <h1  style="color: white;">精选游戏</h1>
    
      <div id="item1" class="item">
        <h2  style="color: white;">1F 精选深度折扣</h2>
        <ul>
          <li style="display: flex;">
            <a href="#">
              <img src="images/lunbo3.jpg"style="width: 330px;height: 200px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">星露谷物语</span></p>
            </a>
            <a href="#">
              <img src="images/博德之门.jpeg"style="width: 330px;height: 200px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 250px;">博德之门</span></p>
            </a>
          </li>
          <li style="display: flex;">
            <a href="#">
              <img src="images/荒野大镖客.png"style="width: 330px;height: 190px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">荒野大镖客</span></p>
            </a>
            <a href="#">
              <img src="images/赛博2077.png"style="width: 330px;height: 190px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">赛博2077</span></p>
            </a>
          </li>
        </ul>
      </div>
      <!-- 若干个item-->
      <div id="item2" class="item">
        <h2  style="color: white;">2F 猜你喜欢</h2>
        <ul>
          <li style="display: flex;">
            <a href="#">
              <img src="images/csgo.jpeg"style="width: 330px;height: 200px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 260px;">csgo</span></p>
            </a>
            <a href="#">
              <img src="images/巨龙传说.png"style="width: 330px;height: 200px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 250px;">巨龙传说</span></p>
            </a>
          </li>
          <li style="display: flex;">
            <a href="#">
              <img src="images/巫师3.png"style="width: 330px;height: 190px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 260px;">巫师3</span></p>
            </a>
            <a href="#">
              <img src="images/星空.png"style="width: 330px;height: 190px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 265px;">星空</span></p>
            </a>
          </li>
        </ul>
      </div>
      <div id="item3" class="item">
        <h2  style="color: white;">3F 您的愿望单</h2>
        <ul>
          <li style="display: flex;">
            <a href="#">
              <img src="images/lunbo2.png"style="width: 330px;height: 200px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">荒野猎人</span></p>
            </a>
            <a href="#">
              <img src="images/g2.png"style="width: 330px;height: 200px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 255px;">地平线4</span></p>
            </a>
          </li>
          <li style="display: flex;">
            <a href="#">
              <img src="images/g1.png"style="width: 330px;height: 190px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">上古卷轴</span></p>
            </a>
            <a href="#">
              <img src="images/辐射3.png"style="width: 330px;height: 190px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 260px;">辐射3</span></p>
            </a>
          </li>
        </ul>
      </div>
      <div id="item4" class="item">
        <h2  style="color: white;">4F 您游戏的DLC</h2>
        <ul>
          <li style="display: flex;">
            <a href="#">
              <img src="images/mod1-1.png"style="width: 330px;height: 200px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 210px;">上古卷轴-黄金之路</span></p>
            </a>
            <a href="#">
              <img src="images/mod1-2.png"style="width: 330px;height: 200px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">星露谷物语</span></p>
            </a>
          </li>
          <li style="display: flex;">
            <a href="#">
              <img src="images/mod1-3.png"style="width: 330px;height: 190px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">星露谷物语</span></p>
            </a>
            <a href="#">
              <img src="images/mod1-4.png"style="width: 330px;height: 190px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">星露谷物语</span></p>
            </a>
          </li>
        </ul>
      </div>
      <div id="item5" class="item">
        <h2  style="color: white;">5F 热销商品</h2>
        <ul>
          <li style="display: flex;">
            <a href="#">
              <img src="images/lunbo3.jpg"style="width: 330px;height: 200px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">星露谷物语</span></p>
            </a>
            <a href="#">
              <img src="images/lunbo3.jpg"style="width: 330px;height: 200px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">星露谷物语</span></p>
            </a>
          </li>
          <li style="display: flex;">
            <a href="#">
              <img src="images/lunbo3.jpg"style="width: 330px;height: 190px; margin-right: 55px;" />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">星露谷物语</span></p>
            </a>
            <a href="#">
              <img src="images/lunbo3.jpg"style="width: 330px;height: 190px; " />
              <p class="fon-10"><span>5折</span>29￥<span style="margin-left: 240px;">星露谷物语</span></p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <script src="js/scroll.js"></script>
    <!-- 
      1.获取div高度
       1）div没有隐藏也没有溢出
          div.offsetHeight
          div.clientHeight
       2）div有隐藏或溢出
          div.scrollHeight
      2.获取浏览器窗口高度
      window.innerHeight
      3.获取·div（节点）距离顶部的高度
      div.offsetTop
      4.页面卷去的高度
      1)外层节点是<!DOCTYPE html>   第一行的节点
      document.documentElement.scrollTop
      2）外层节点是<html>
      document.body.scrollTop

    -->
    <script src="js/jsCode.js"></script>
    <script src="js/base.js"></script>
  </body>
</html>
